<template>
  <div class="app-container">
    <div style="background-color: #fff">
      <div class="container-module" style="padding-bottom: 0">
        <el-form :inline="true" class="search-form" size="small">
          <el-row style="display: flex">
            <div style="flex: 1">
              <el-form-item
                class="search-form-item"
                label="结算金额"
                style="margin: 5px 0"
              >
                <el-input
                  clearable
                  placeholder="请输入结算金额"
                  v-model="searchForm.name"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="getlevedlist"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-refresh"
                  @click="resetting"
                  >重置</el-button
                >
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div style="padding: 0 20px">
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="16">
              <div class="left-panel">
                <el-button
                  type="text"

                  size="small"
                  @click=""
                  ></el-button
                >
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="right-panel el-button-group">
                <el-button
                  class=""
                  icon="el-icon-refresh"
                  size="mini"
                  @click="refresh"
                ></el-button>
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button
                      class=""
                      icon="el-icon-s-operation"
                      size="mini"
                    ></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="fruit in allTableThead"
                      :key="fruit"
                    >
                      <el-checkbox
                        v-model="checkboxTableThead"
                        :label="fruit"
                        >{{ tableTheadOptions[fruit].label }}</el-checkbox
                      >
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
            <!-- <el-col>
            <el-button type="primary" size="small" @click="addlevel">添加等级</el-button>
          </el-col> -->
          </el-row>
        </div>
        <!-- 订单列表 -->
        <el-row :gutter="20">
          <el-col class="new_table_card">
            <el-table
              v-loading="loading"
              highlight-current-row
              :data="tableData"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              style="width: 100%"
              height="100%"
            >
              <el-table-column
                v-for="fruit in tableThead"
                :key="fruit"
                :label="tableTheadOptions[fruit].label"
                :width="
                  tableTheadOptions[fruit].width
                    ? tableTheadOptions[fruit].width + 'px'
                    : 'auto'
                "
                align="center"
              >
                <template slot-scope="scope">
                  <span>
                    <el-tooltip
                      placement="top"
                      :content="
                        scope.row[fruit] ? scope.row[fruit].toString() : '-'
                      "
                    >
                      <div class="one_line_hidden">
                        {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                      </div>
                    </el-tooltip>
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="mini"
                    v-hasPermi="'supplierlevel/edit'"
                    @click="editlevel(scope.row)"
                  >
                    编辑
                  </el-button>
                  <!-- <el-button type="text" size="small" @click="deletelevel">
                  删除
                </el-button> -->
                </template>
              </el-table-column>
            </el-table></el-col
          >
          <el-col>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="searchForm.page"
              :limit.sync="searchForm.count"
              @pagination="getlevedlist"
            />
          </el-col>
        </el-row>
      </div>
    </div>

    <el-drawer
      id="drawer"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="添加/编辑供应商等级"
      size="40%"
      :withHeader="false"
      :visible.sync="dialogVisible"
      @close="closeWay"
      :show-close="true"
    >
      <div style="position: relative" v-loading="addPutLoading">
        <div class="drawerTitle" id="drawerTitle">
          <span>供应商等级-添加/编辑</span>
          <div class="close" @click="closeWay">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
        <el-alert
          id="prompt_explanation"
          class="prompt_explanation"
          title="说明：供应商级别是管理区分标识用,在系统中不存在相关业务逻辑！"
          type="warning"
          :closable="false"
        >
        </el-alert>
        <el-scrollbar
          wrap-style="overflow-x:hidden;"
          :style="'height:' + reduce"
        >
          <el-row v-if="!editdialogVisible">
            <el-form
              ref="form"
              :rules="rules"
              :model="form"
              label-width="120px"
            >
              <el-col :span="24">
                <el-form-item label="名称:" prop="name">
                  <el-input
                    v-model="form.name"
                    maxlength="10"
                    show-word-limit
                    placeholder="请输入名称"
                    style="width: calc(100% - 50px)"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="级别:" prop="level">
                  <el-input
                    v-model="form.level"
                    maxlength="10"
                    show-word-limit
                    placeholder="请输入级别"
                    style="width: calc(100% - 50px)"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" prop="explain">
                  <el-input
                    type="textarea"
                    placeholder="请输入..."
                    v-model="form.explain"
                    style="width: calc(100% - 50px)"
                    :autosize="{ minRows: 4, maxRows: 6 }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <el-row v-else>
            <el-form
              ref="forms"
              :rules="editrules"
              :model="forms"
              label-width="120px"
            >
              <el-col :span="24">
                <el-form-item label="ID:">
                  <el-input
                    v-model="forms.id"
                    style="width: calc(100% - 50px)"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="级别名称:" prop="name">
                  <el-input
                    v-model="forms.name"
                    maxlength="10"
                    show-word-limit
                    placeholder="请输入级别名称"
                    style="width: calc(100% - 50px)"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="级别:" prop="level">
                  <el-input
                    v-model="forms.level"
                    maxlength="10"
                    show-word-limit
                    onkeyup="value=value.replace(/\D/g,'')"
                    placeholder="请输入级别"
                    style="width: calc(100% - 50px)"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="级别说明" prop="explain">
                  <el-input
                    type="textarea"
                    placeholder="请输入..."
                    v-model="form.explain"
                    style="width: calc(100% - 50px)"
                    :autosize="{ minRows: 4, maxRows: 6 }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </el-scrollbar>
        <el-row style="margin: 20px 0">
          <el-col
            v-if="!editdialogVisible"
            :span="24"
            style="text-align: right; padding-right: 30px"
          >
            <el-button @click="closeWay">取 消</el-button>
            <el-button
              :loading="addPutLoading"
              type="primary"
              @click="comitadd('form')"
              >保 存</el-button
            >
          </el-col>
          <el-col
            v-else
            :span="24"
            style="text-align: right; padding-right: 30px"
          >
            <el-button @click="closeWay">取 消</el-button>
            <el-button
              :loading="addPutLoading"
              type="primary"
              @click="comitedit('forms')"
              >保 存</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getlevedList, addSupplierlevel } from "@/api/supplier/index";
const tableTheadOption = {
  id: {
    label: "等级ID",
    field: "id",
  },
  name: {
    label: "等级名称",
    field: "name",
  },
  level: {
    label: "等级级别",
    field: "level",
  },
  updated_at: {
    label: "更新时间",
    field: "updated_at",
    width: 150,
  },
  created_at: {
    label: "创建时间",
    field: "created_at",
  },
};

const allTableThead = ["id", "level", "name", "updated_at", "created_at"];
const defaultTableThead = ["id", "level", "name", "updated_at", "created_at"];
export default {
  name: "supplierlevel",
  data() {
    return {
      reduce: 0,
      rules: {
        name: [{ required: true, message: "请输入等级名称", trigger: "blur" }],
        level: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /\D/g;
              if (req.test(value)) {
                return callback(new Error("只能输入数字"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      }, //表单验证
      editrules: {
        name: [
          { required: true, message: "请输入等级名称", trigger: "change" },
        ],
        level: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /\D/g;
              if (req.test(value)) {
                return callback(new Error("只能输入数字"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      }, //表单验证
      dialogVisible: false, //编辑弹窗
      editdialogVisible: false,
      form: {
        id: "",
        name: "",
        level: "",
        explain: "",
      },
      forms: {
        id: "",
        name: "",
        level: "",
        explain: "",
      },
      searchForm: {
        page: 1,
        count: 10,
        name: "", //名称
      },
      // 修改提交按钮加载
      addPutLoading: false,
      currentPage4: 1, //页码
      tableData: [],
      loading: true, //刷新
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      total: 0,
    };
  },
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1; // 为了保证table 每次都会重渲
    },
  },
  mounted() {
    this.getlevedlist();
  },
  methods: {
    nextTickWay(idName1, idName2, idName3) {
      this.$nextTick(() => {
        var adddialogVisible = document.getElementById(idName1);
        var drawerTitle = document.getElementById(idName2);
        var prompt_explanation = document.getElementById(idName3);
        this.reduce =
          adddialogVisible.offsetHeight -
          (prompt_explanation.offsetHeight + drawerTitle.offsetHeight + 100) +
          "px";
      });
    },
    closeWay() {
      this.form = {
        id: "",
        name: "",
        level: "",
        explain: "",
      };
      this.forms = {
        id: "",
        name: "",
        level: "",
        explain: "",
      };
      this.dialogVisible = false;
      if (this.editdialogVisible) {
        this.editdialogVisible = false;
      }
    },
    resetting() {
      this.searchForm = {
        page: 1,
        count: 10,
        name: "", //名称
      };
      this.getlevedlist();
    },
    // 刷新
    refresh() {
      this.loading = true;
      this.getlevedlist();
    },
    //等级列表
    getlevedlist() {
      this.loading = true;
      getlevedList(this.searchForm).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    comitadd(formName) {
      //确认提交表单
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addPutLoading = true;
          //请求接口
          addSupplierlevel(this.form)
            .then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.addPutLoading = false;
                return this.$messages.error(res.msg);
              }
              this.addPutLoading = false;
              this.dialogVisible = false;
              this.$messages.success("添加成功");
              this.closeWay();
              this.getlevedlist();
            })
            .catch(() => {
              this.addPutLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    comitedit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addPutLoading = true;
          //请求接口
          addSupplierlevel(this.forms)
            .then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.addPutLoading = false;
                return this.$messages.error(res.msg);
              }
              this.addPutLoading = false;
              this.editdialogVisible = false;
              this.$messages.success("编辑成功");
              this.closeWay();
              this.getlevedlist();
            })
            .catch(() => {
              this.addPutLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //添加
    addlevel() {
      this.dialogVisible = true;
      this.nextTickWay("drawer", "drawerTitle", "prompt_explanation");
    },
    //编辑
    editlevel(row) {
      this.forms = JSON.parse(JSON.stringify(row));
      this.addlevel();
      this.editdialogVisible = true;
      this.nextTickWay("drawer", "drawerTitle", "prompt_explanation");
    },
    //页码
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //点击搜索
    search() {
      console.log(this.query, "搜索的数据");
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.order_center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 0;
  font-size: 13px;
  color: #666;
}
</style>
